<template>
  <div>
    <el-dialog :title="titname" :visible="visible" >
        <el-form :model="ruleForm" :rules="ruless" ref="ruleFormt" label-width="100px" class="demo-ruleForm">

            <el-upload class="uploadAvatar" ref="uploadAvatar" action="/api/students/uploadStuAvatar"
                    list-type="picture-card" :on-success="uploadSuccess" :on-remove="removeAvatar" :limit="1"
                    name="headimgurl" :multiple="false">
                    <i class="el-icon-plus"></i>
            </el-upload>

            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="项目地址" prop="productUrl">
                <el-input v-model="ruleForm.productUrl"></el-input>
            </el-form-item>

            <el-form-item label="班级" prop="class">
                <el-input v-model="ruleForm.class"></el-input>
            </el-form-item>

            <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleForm.age"></el-input>
            </el-form-item>

            <el-form-item label="城市" prop="city">
                <el-input v-model="ruleForm.city"></el-input>
            </el-form-item>

            <el-form-item label="学历" prop="degree">
                <el-input v-model="ruleForm.degree"></el-input>
            </el-form-item>

            <el-form-item label="描述" prop="description">
                <el-input v-model="ruleForm.description"></el-input>
            </el-form-item>

            <el-form-item>
                    <el-button @click="$emit('open')">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleFormt')" >确 定</el-button>
            </el-form-item>
        </el-form>
        
    </el-dialog>
  </div>
</template>

<script>


export default {
    props:{
        visible:{
            required:true,
            type:Boolean,
            default(){
                return false
            }
        }
    },
    data(){
        return{
            // dialogFormVisible:true,

            ruleForm:{
                name:'',
                productUrl:'',
                class:'',
                age:'',
                city:'',
                degree:'',
                description:'',
                headimgurl:''
            },

            titname:'添加学员信息',

            ruless:{
            name: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
            ],

            productUrl: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
            ],

            class: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
            ],

            age: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
            ],

            city: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
            ],

            degree: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
            ],

            description: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
            ],
            }
            
        }
    },



    methods:{

        uploadSuccess(r) {//图片上传成功的回调
            console.log(r);
            //手动给stuForm的headimgurl赋值
            if (r.state) {
                this.ruleForm.headimgurl = r.headimgurl
            } else {
                this.$message.error(r.msg + "-" + r.err)
            }
            // console.log(r);
            // this.stuForm.headimgurl = r.headimgurl;
        },

         removeAvatar(r) {

        },

        


        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // this.dialogFormVisible = false
            
            this.$emit('close',this.ruleForm)
          }
        });
      },
    }
}
</script>

<style>

</style>